<template>
  <div class="sidebar">
    <h2>AI 会话系统</h2>
    <el-menu
      router
      :default-active="currentRoute"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
    >
      <!-- 控制台菜单（带子菜单） -->
      <el-sub-menu index="console">
        <template #title>
          <el-icon><setting /></el-icon>
          <span>控制台</span>
        </template>
        <el-menu-item index="/ai/model/apiKey">
          <el-icon><odometer /></el-icon>
          <span>API密钥</span>
        </el-menu-item>
        <el-menu-item index="/ai/model/model">
          <el-icon><tools /></el-icon>
          <span>模型配置</span>
        </el-menu-item>
        <el-menu-item index="/ai/model/chatRole">
          <el-icon><user /></el-icon>
          <span>聊天角色</span>
        </el-menu-item>
        <!-- <el-menu-item index="/console/system-logs">
          <el-icon><document /></el-icon>
          <span>聊天管理</span>
        </el-menu-item> -->

      </el-sub-menu>

      <!-- 其他菜单项 -->
      <!-- <el-menu-item index="/small-list">
        <el-icon><list /></el-icon>
        <span>简单实现AiChat</span>
      </el-menu-item> -->
      <el-menu-item index="/ai/chat">
        <el-icon><monitor /></el-icon>
        <span>AI对话</span>
      </el-menu-item>
      <el-menu-item index="/tools">
        <el-icon><chat-line-round /></el-icon>
        <span>工具包</span>
      </el-menu-item>
      <el-menu-item index="/knowledge">
        <el-icon><search /></el-icon>
        <span>Ai知识库</span>
      </el-menu-item>
      <el-menu-item index="/my-interface">
        <el-icon><connection /></el-icon>
        <span>小我的界面</span>
      </el-menu-item>
      <el-menu-item index="/api-management">
        <el-icon><key /></el-icon>
        <span>API 管理</span>
      </el-menu-item>
      
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  Setting,
  Odometer,
  Tools,
  User,
  Document,
  List,
  Monitor,
  ChatLineRound,
  Connection,
  Key,
  Search
} from '@element-plus/icons-vue'

export default defineComponent({
  name: 'Sidebar',
  components: {
    Setting,
    Odometer,
    Tools,
    User,
    Document,
    List,
    Monitor,
    ChatLineRound,
    Connection,
    Key,
    Search
  },
  setup() {
    const route = useRoute()
    const currentRoute = ref(route.path)
    const isCollapse = ref(false)

    // 监听路由变化
    watch(() => route.path, (newPath) => {
      currentRoute.value = newPath
    })

    return {
      currentRoute,
      isCollapse
    }
  }
})
</script>

<style scoped>
.sidebar {
  padding: 20px 0;
  height: 100%;
  background-color: #f8f9fa;
  border-right: 1px solid #e6e8ec;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #409EFF;
  padding: 0 20px;
}

.el-menu {
  border-right: none;
}

.el-menu-item, .el-sub-menu {
  margin: 4px 8px;
  border-radius: 6px;
}

.el-menu-item:hover, .el-sub-menu:hover {
  background-color: #ecf5ff;
}

:deep(.el-sub-menu__title:hover) {
  background-color: #ecf5ff;
}

.el-menu-item.is-active {
  background-color: #ecf5ff;
  color: #409EFF;
  font-weight: 500;
}
</style>